<template>
    <div class="app-container">
      <el-form ref="queryForm" :inline="true">
        <el-form-item>
          <el-button type="success" @click="handleAdd"
            >新增</el-button>
          </el-form-item>
          <!-- <el-button
            type="danger"
            :icon="Delete"
            @click="handleDelete"
            :disabled="multiple"
            >删除</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="queryParams.name"
            placeholder="商品名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-cascader
            v-model="queryParams.categoryId"
            placeholder="商品分类"
            :props="{ emitPath: false }"
            :options="categoryOptions"
            clearable
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery"
            >查询</el-button
          >
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item> -->
      </el-form>
    
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="tableList"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        border
      >
        <el-table-column type="selection" min-width="5%" center />
        <el-table-column type="index" label="序号" min-width="15%" center />
        <el-table-column label="工号" prop="workno" min-width="100" />
        <el-table-column label="姓名" prop="name" min-width="100" />
        <el-table-column label="所属部门" prop="departmentName" min-width="100" />
        <el-table-column label="手机号码" prop="phone" min-width="100" />



        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button
              type="primary"
              :icon="Edit"
              circle
              plain
              @click.stop="handleUpdate(scope.row)"
            />
            <el-button
              type="danger"
              :icon="Delete"
              circle
              plain
              @click.stop="handleDelete(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
  
        <!-- 表单弹窗 -->
        <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
          <el-form
            ref="dataFormRef"
            :model="formData"
            label-width="100px"
          >
            <el-form-item label="工号" prop="workno" >
              <el-input v-model="formData.workno" />
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="formData.name" />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="formData.sex">
                <el-radio :label="0">男</el-radio>
                <el-radio :label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input v-model="formData.phone" />
            </el-form-item>
          </el-form>
    
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </template>
        </el-dialog>
  
    </template>
    
  <script lang="ts" setup>
  import {reactive, ref, onMounted, toRefs } from 'vue';  //导入vue的一些内置方法，v2是全部导入，v3是按需导入
  import { ElTable, ElMessage, ElMessageBox, ElForm } from 'element-plus';  //引入el的一些基础组件
  import { useRouter } from 'vue-router';  //引入路由
  
    import {
    Search,
    Position,
    Edit,
    Refresh,
    Delete,
    View,
  } from '@element-plus/icons-vue';  //导入图标
    //导入实体形状
    import {PersonnelItem, PersonnelFormData} from '@/types';
    import { Dialog } from '@/types/common';
    //导入api
    import { listPersAdministrative, getPersAdministrativeFormDetail, addPersAdministrative, updatePersAdministrative, deletePersAdministrative } from '@/api/system/persAdministrative';
  
    const dataTableRef = ref(ElTable);  //暂时算是，控制表格吧
    const dataFormRef = ref(ElForm); //(模态框的控制) 属性名必须和元素的ref属性值一致
    const router = useRouter();  //实例化一个路由对象吧？
  
  
    //全局用的数据
  const state = reactive({
    // 遮罩层
    loading: true,
    // 选中数组
    ids: [],
    // 非单个禁用
    single: true,
    // 非多个禁用
    multiple: true,
    //弹框
    dialog: {} as Dialog,
    //弹出框表单
    formData: {sex: 0} as PersonnelFormData,
    tableList: [] as PersonnelItem[],
  })
  
  const{
    loading,
    tableList,
    dialog,
    formData
    } = toRefs(state)  //从这里把数据对象衍射出去，先这样理解先
  
    const search = ref('')
  
  
    //列表查询的方法
   function handleQuery() {
    state.loading = true;  //打开遮罩
    listPersAdministrative().then(({ data }) => {
      state.tableList = data; 
      state.loading = false;  //关闭遮罩
    }
   )  //初始化数据列表
  }
  //新增
  function handleAdd() {
    state.dialog = {
      title: '添加行政成员',
      visible: true,
    };
  }
    //编辑
    function handleUpdate(row: any) {
      state.dialog = {
      title: '修改行政成员',
      visible: true,
    };
    const itemId = row.id || state.ids;
    getPersAdministrativeFormDetail(itemId).then((response) => {
      state.formData = response.data;
    });
  }
  //删除
  function handleDelete(row: any) {
    const ids = row.id || state.ids.join(',');
    ElMessageBox.confirm('是否确认删除选中的数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(function () {
        return deletePersAdministrative(ids);
      })
      .then(() => {
        ElMessage.success('删除成功');
        handleQuery();
      });
  }
    //行单击事件
    function handleRowClick(row: any) {
    dataTableRef.value.toggleRowSelection(row);  //单选按钮选中，应该是
  }
  //全选事件？
  function handleSelectionChange(selection: any) {
    state.ids = selection.map((item: { id: any }) => item.id);
    state.single = selection.length != 1;  //单个？
    state.multiple = !selection.length;  //多个？
  }
  //弹框表单提交
  function submitForm() {
        const roleId = state.formData.id;
        if (roleId) {
          updatePersAdministrative(roleId, state.formData).then(() => {
            ElMessage.success('修改成功');
            cancel();  //关闭模态框
            handleQuery();  //重新查询表格数据
          });
        } else {
          addPersAdministrative(state.formData).then(() => {
            ElMessage.success('新增成功');
            cancel();  //关闭模态框
            handleQuery();   //重新查询表格数据
          });
        }
  }
  //关闭模态框
  function cancel() {
    state.formData.id = undefined;
    dataFormRef.value.resetFields();  //将模块框中的字段重置
    state.dialog.visible = false;  //模态框置为隐藏
  }
    //多选删除的方法
  //   function handleDelete(row: any) {
  //   const ids = row.id || state.ids.join(',');
  //   ElMessageBox.confirm('是否确认删除选中的数据项?', '警告', {
  //     confirmButtonText: '确定',
  //     cancelButtonText: '取消',
  //     type: 'warning',
  //   })
  //     .then(function () {
  //       return deleteGoods(ids);
  //     })
  //     .then(() => {
  //       ElMessage.success('删除成功');
  //       handleQuery();
  //     });
  // }
  
  
  
  
  
  
  
  
  //vue的生命周期函数，这个生命周期函数，按照字面意思就是，组件安装成功之后，意思是数据呀什么的什么的，都声明好了
  //然后，我在这个组件声明好之后，给表格填入数据
  onMounted(() => {
    handleQuery();  //初始化，给表数据
   
  });
  
  </script>
    